{% extends "base.html" %}

{% block title %}样本集 {{ dataset_name }} - 瞬变源数据展示{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">首页</a></li>
                <li class="breadcrumb-item active" aria-current="page">样本集 {{ dataset_name }}</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h2 class="mb-0">样本集 {{ dataset_name }}</h2>
                <div class="d-flex align-items-center">
                    <span class="me-3">总计: {{ total_count }} 个瞬变源</span>
                    <div class="dropdown">
                        <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="perPageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            每页 {{ per_page }} 个
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="perPageDropdown">
                            {% for option in per_page_options %}
                            <li><a class="dropdown-item" href="?page=1&per_page={{ option }}{% if request.args.get('filter') %}&filter={{ request.args.get('filter') }}{% endif %}">{{ option }} 个/页</a></li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!-- 分类统计 -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5>分类统计</h5>
                        <div class="d-flex flex-wrap">
                            {% for classification, count in classification_count.items() %}
                            <a href="?page=1&per_page={{ per_page }}&filter={{ classification }}" class="badge bg-secondary me-2 mb-2 text-decoration-none">
                                {{ classification }}: {{ count }}
                            </a>
                            {% endfor %}
                        </div>
                        <!-- 清除筛选按钮 -->
                        {% if request.args.get('filter') %}
                        <a href="?page=1&per_page={{ per_page }}" class="btn btn-sm btn-outline-primary mt-2">清除筛选</a>
                        {% endif %}
                    </div>
                </div>

                <!-- 顶部分页 -->
                {% if total_pages > 1 %}
                <div class="row mb-4">
                    <div class="col-12">
                        <nav aria-label="分页导航">
                            <ul class="pagination justify-content-center">
                                {% if page > 1 %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page-1 }}&per_page={{ per_page }}{% if request.args.get('filter') %}&filter={{ request.args.get('filter') }}{% endif %}" aria-label="上一页">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                {% else %}
                                <li class="page-item disabled">
                                    <span class="page-link">&laquo;</span>
                                </li>
                                {% endif %}

                                {% for p in range(1, total_pages + 1) %}
                                {% if p == page %}
                                <li class="page-item active" aria-current="page">
                                    <span class="page-link">{{ p }}</span>
                                </li>
                                {% elif p >= page - 3 and p <= page + 3 %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ p }}&per_page={{ per_page }}{% if request.args.get('filter') %}&filter={{ request.args.get('filter') }}{% endif %}">{{ p }}</a>
                                </li>
                                {% elif p == 1 or p == total_pages %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ p }}&per_page={{ per_page }}{% if request.args.get('filter') %}&filter={{ request.args.get('filter') }}{% endif %}">{{ p }}</a>
                                </li>
                                {% elif p == page - 4 or p == page + 4 %}
                                <li class="page-item disabled">
                                    <span class="page-link">...</span>
                                </li>
                                {% endif %}
                                {% endfor %}

                                {% if page < total_pages %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page+1 }}&per_page={{ per_page }}{% if request.args.get('filter') %}&filter={{ request.args.get('filter') }}{% endif %}" aria-label="下一页">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                                {% else %}
                                <li class="page-item disabled">
                                    <span class="page-link">&raquo;</span>
                                </li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                </div>
                {% endif %}

                <!-- 瞬变源列表 -->
                <div class="row">
                    {% for obj in objects %}
                    <div class="col-12 mb-4">
                        <div class="card transient-card">
                            <div class="card-header bg-primary text-white">
                                <h4 class="mb-0">
                                    <i class="fas fa-star"></i> 瞬变源: {{ obj.name }}
                                </h4>
                            </div>
                            <div class="card-body">
                                <!-- 自动分类结果显示 -->
                                <div class="row mb-3">
                                    <div class="col-12">
                                        <h5>自动分类结果: 
                                            <span class="badge bg-info">
                                                {% if obj.classification in transient_types %}
                                                    {{ transient_types[obj.classification] }}
                                                {% else %}
                                                    {{ obj.classification }}
                                                {% endif %}
                                            </span>
                                        </h5>
                                    </div>
                                </div>

                                <!-- 瞬变源图像 -->
                                <div class="row mb-4">
                                    <div class="col-12">
                                        <h5>瞬变源图像</h5>
                                        <div class="text-center">
                                            {% set image_filename = obj.image_path.split('/')[-1] %}
                                            {% if image_filename.endswith('.fit') %}
                                                {% set jpg_filename = image_filename.replace('.fit', '.jpg') %}
                                                {% set fit_filename = image_filename %}
                                            {% else %}
                                                {% set jpg_filename = image_filename %}
                                                {% set fit_filename = image_filename.replace('.jpg', '.fit') %}
                                            {% endif %}
                                            <img src="{{ url_for('serve_image', dataset_path=request.view_args.dataset_path, filename=jpg_filename) }}" 
                                                 alt="{{ obj.name }}" class="transient-image img-fluid" 
                                                 style="max-width: 610px; height: 200px; object-fit: contain;">
                                            <div class="mt-2">
                                                <a href="{{ url_for('serve_image', dataset_path=request.view_args.dataset_path, filename=fit_filename) }}" 
                                                   class="btn btn-outline-secondary btn-sm" download>
                                                    <i class="fas fa-download"></i> 下载fit图像
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 图像属性 -->
                                <div class="row mb-4">
                                    <div class="col-12">
                                        <h5>图像属性</h5>
                                        <div class="table-responsive">
                                            <table class="table table-bordered property-table">
                                                <thead>
                                                    <tr>
                                                        <th>属性</th>
                                                        <th>background</th>
                                                        <th>rms</th>
                                                        <th>peak_flux</th>
                                                        <th>peak_x</th>
                                                        <th>peak_y</th>
                                                        <th>flux3</th>
                                                        <th>flux5</th>
                                                        <th>fwhm</th>
                                                        <th>sharpness</th>
                                                        <th>snr</th>
                                                        <th>peak/3x3</th>
                                                        <th>flux3/5</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <th>观测图像 (obs)</th>
                                                        <td>{{ "%.2f"|format(obj.obs.background) }}</td>
                                                        <td>{{ "%.2f"|format(obj.obs.rms) }}</td>
                                                        <td>{{ "%.2f"|format(obj.obs.peak_flux) }}</td>
                                                        <td>{{ obj.obs.peak_x }}</td>
                                                        <td>{{ obj.obs.peak_y }}</td>
                                                        <td>{{ "%.2f"|format(obj.obs.flux3) }}</td>
                                                        <td>{{ "%.2f"|format(obj.obs.flux5) }}</td>
                                                        <td>{{ "%.2f"|format(obj.obs.fwhm) }}</td>
                                                        <td>{{ "%.2f"|format(obj.obs.sharpness) }}</td>
                                                        <td>{{ "%.2f"|format(obj.obs.snr) }}</td>
                                                        <td>{{ "%.2f"|format(obj.obs.peak_to_3x3) }}</td>
                                                        <td>{{ "%.2f"|format(obj.obs.flux3_to_5x5) }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>模板图像 (tpl)</th>
                                                        <td>{{ "%.2f"|format(obj.tpl.background) }}</td>
                                                        <td>{{ "%.2f"|format(obj.tpl.rms) }}</td>
                                                        <td>{{ "%.2f"|format(obj.tpl.peak_flux) }}</td>
                                                        <td>{{ obj.tpl.peak_x }}</td>
                                                        <td>{{ obj.tpl.peak_y }}</td>
                                                        <td>{{ "%.2f"|format(obj.tpl.flux3) }}</td>
                                                        <td>{{ "%.2f"|format(obj.tpl.flux5) }}</td>
                                                        <td>{{ "%.2f"|format(obj.tpl.fwhm) }}</td>
                                                        <td>{{ "%.2f"|format(obj.tpl.sharpness) }}</td>
                                                        <td>{{ "%.2f"|format(obj.tpl.snr) }}</td>
                                                        <td>{{ "%.2f"|format(obj.tpl.peak_to_3x3) }}</td>
                                                        <td>{{ "%.2f"|format(obj.tpl.flux3_to_5x5) }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>残差图像 (res)</th>
                                                        <td>{{ "%.2f"|format(obj.res.background) }}</td>
                                                        <td>{{ "%.2f"|format(obj.res.rms) }}</td>
                                                        <td>{{ "%.2f"|format(obj.res.peak_flux) }}</td>
                                                        <td>{{ obj.res.peak_x }}</td>
                                                        <td>{{ obj.res.peak_y }}</td>
                                                        <td>{{ "%.2f"|format(obj.res.flux3) }}</td>
                                                        <td>{{ "%.2f"|format(obj.res.flux5) }}</td>
                                                        <td>{{ "%.2f"|format(obj.res.fwhm) }}</td>
                                                        <td>{{ "%.2f"|format(obj.res.sharpness) }}</td>
                                                        <td>{{ "%.2f"|format(obj.res.snr) }}</td>
                                                        <td>{{ "%.2f"|format(obj.res.peak_to_3x3) }}</td>
                                                        <td>{{ "%.2f"|format(obj.res.flux3_to_5x5) }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <!-- 人工分类 -->
                                <div class="row mb-3">
                                    <div class="col-12">
                                        <h5>人工分类</h5>
                                        <div class="form-group">
                                            <label class="mb-2">请选择分类结果:</label>
                                            <div class="d-flex flex-wrap">
                                                {% for key, value in transient_types.items() %}
                                                <div class="form-check me-4">
                                                    <input class="form-check-input autoSubmit" type="radio" name="manualClassification_{{ obj.name }}" id="{{ key }}_{{ obj.name }}" value="{{ key }}" data-transient-name="{{ obj.name }}" {% if obj.manual_classify_result == key or (not obj.manual_classify_result and obj.classification == key) %}checked{% endif %}>
                                                    <label class="form-check-label" for="{{ key }}_{{ obj.name }}">{{ value }}</label>
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                        <!-- 查看详细信息链接 -->
                                        <div class="mt-3">
                                            <a href="{{ url_for('transient_detail', dataset_path=request.view_args.dataset_path, name=obj.name) }}" 
                                               class="btn btn-outline-primary" target="_blank">
                                                <i class="fas fa-external-link-alt"></i> 点击查看瞬变源详细
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                <!-- 分页 -->
                {% if total_pages > 1 %}
                <div class="row">
                    <div class="col-12">
                        <nav aria-label="分页导航">
                            <ul class="pagination justify-content-center">
                                {% if page > 1 %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page-1 }}&per_page={{ per_page }}{% if request.args.get('filter') %}&filter={{ request.args.get('filter') }}{% endif %}" aria-label="上一页">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                {% else %}
                                <li class="page-item disabled">
                                    <span class="page-link">&laquo;</span>
                                </li>
                                {% endif %}

                                {% for p in range(1, total_pages + 1) %}
                                {% if p == page %}
                                <li class="page-item active" aria-current="page">
                                    <span class="page-link">{{ p }}</span>
                                </li>
                                {% elif p >= page - 3 and p <= page + 3 %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ p }}&per_page={{ per_page }}{% if request.args.get('filter') %}&filter={{ request.args.get('filter') }}{% endif %}">{{ p }}</a>
                                </li>
                                {% elif p == 1 or p == total_pages %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ p }}&per_page={{ per_page }}{% if request.args.get('filter') %}&filter={{ request.args.get('filter') }}{% endif %}">{{ p }}</a>
                                </li>
                                {% elif p == page - 4 or p == page + 4 %}
                                <li class="page-item disabled">
                                    <span class="page-link">...</span>
                                </li>
                                {% endif %}
                                {% endfor %}

                                {% if page < total_pages %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page+1 }}&per_page={{ per_page }}{% if request.args.get('filter') %}&filter={{ request.args.get('filter') }}{% endif %}" aria-label="下一页">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                                {% else %}
                                <li class="page-item disabled">
                                    <span class="page-link">&raquo;</span>
                                </li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
<script>
    // 确保jQuery已加载
    function executeScript() {
        // 自动提交分类结果
        $(document).on('change', '.autoSubmit', function() {
            var transientName = $(this).data('transient-name');
            var manualClassification = $('input[name="manualClassification_' + transientName + '"]:checked').val();
            
            // 发送AJAX请求保存分类结果
            $.ajax({
                url: '/save_classification',
                type: 'POST',
                data: {
                    dataset_path: '{{ request.view_args.dataset_path }}',
                    transient_name: transientName,
                    manual_classify_result: manualClassification
                },
                success: function(response) {
                    // 获取选中项的显示文本
                    const selectedText = $('input[name="manualClassification_' + transientName + '"]:checked').siblings('label').text();
                    alert('分类结果已自动保存: ' + selectedText);
                    // 更新页面上的显示
                    location.reload();
                },
                error: function(xhr, status, error) {
                    alert('保存失败: ' + error);
                }
            });
        });
    }
    
    // 检查jQuery是否已定义
    if (typeof $ !== 'undefined') {
        $(document).ready(executeScript);
    } else {
        // 如果jQuery未定义，等待其加载
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof $ !== 'undefined') {
                executeScript();
            } else {
                // 如果仍未定义，尝试重新加载jQuery
                var script = document.createElement('script');
                script.src = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js';
                script.onload = function() {
                    executeScript();
                };
                document.head.appendChild(script);
            }
        });
    }
</script>
{% endblock %}